<script setup lang="ts">
import { ref } from 'vue'

// 接收父组件传过来的值
const prop = defineProps({
  count: {
    type: Number,
    required: true
  }
})

// 向父组件传值
const emit = defineEmits(['send-msg'])
const sendMsg = (): void => {
  emit('send-msg', '我是子组件的值')
}

const msg = ref('我是子组件中的文本')
// 子组件调用父组件的方法
const callParentMethod = (): void => {
  alert('我是子组件的方法')
}

// 通过这种方式暴露给父组件
defineExpose({
  msg,
  callParentMethod
})
</script>

<template>
  <div class="card">
    <h2>子组件获取父组件值</h2>
    <p>父元素值：count is {{ prop.count }}</p>
  </div>
  <div class="card">
    <h2>子组件值传到父组件</h2>
    <button @click="sendMsg">子组件传值</button>
  </div>
  <!-- <div class="card">
    <h2>子组件传调用父组件的方法</h2>
  </div> -->
</template>

<style scoped>
.card {
  margin: 10px;
  background-color: #e3cccc;
}
</style>
